<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style" >
            <div class="line-wrap">
                <div class="line-title">供暖情况</div>
                <div class="line-main">
                    <Form ref="formCustom" :model="formCustom"  :rules="ruleCustom"  :label-width="150" >
                        <Row>
                            <Col span="7">
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :value="formCustom.imp_date" format="yyyy-MM-dd"
                                                type="date" :options="optionsDate"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="住宅供热面积占比"  prop="house_ratio">
                                    <i-input type="number" number  v-model="formCustom.house_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="非住宅供热面积占比"   prop="non_house_ratio">
                                    <i-input type="number" number  v-model="formCustom.non_house_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
<!--                            <Col span="7">-->
<!--                                <Form-item label="市九区供热面积占比"  prop="city_ratio">-->
<!--                                    <i-input type="number" number  v-model="formCustom.city_ratio"><span slot="append">%</span></i-input>-->
<!--                                </Form-item>-->
<!--                            </Col>-->
<!--                            <Col span="7">-->
<!--                                <Form-item label="市外郊供热面积占比"   prop="suburb_ratio">-->
<!--                                    <i-input type="number" number v-model="formCustom.suburb_ratio"><span slot="append">%</span></i-input>-->
<!--                                </Form-item>-->
<!--                            </Col>-->
                            <Col span="7">
                                <Form-item label="集中供热占比"  prop="focus_ratio">
                                    <i-input type="number" number  v-model="formCustom.focus_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="非集中供热面积占比"  prop="non_focus_ratio">
                                    <i-input type="number" number  v-model="formCustom.non_focus_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="清洁能源占比"  prop="clean_energy_ratio">
                                    <i-input type="number" number  v-model="formCustom.clean_energy_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">

                                <Form-item label="燃煤占比"  prop="coal_ratio">
                                    <i-input type="number" number v-model="formCustom.coal_ratio"><span slot="append">%</span></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('formCustom')">保存</Button>
                    </div>
                </div>
            </div>
        </Card>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
    </div>
</template>

<script>
import { insert, update, getById } from '@/api/outbreak-management/city-operation/plumbing-and-heating/heating-condition'
export default {
  data () {
    return {
      optionsDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      showBackBtn: false,
      // 添加表单/修改表单
      formCustom: {
        id: '',
        house_ratio: 0,
        non_house_ratio: 0,
        // city_ratio: 0,
        // suburb_ratio: 0,
        focus_ratio: 0,
        non_focus_ratio: 0,
        clean_energy_ratio: 0,
        coal_ratio: 0,
        imp_date: ''
      },
      ruleCustom: {
        house_ratio: [
          { required: true, type: 'number', message: '住宅供热面积占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '住宅供热面积占比范围0-100', trigger: 'blur' }
        ],
        non_house_ratio: [
          { required: true, type: 'number', message: '非住宅供热面积占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '非住宅供热面积占比范围0-100', trigger: 'blur' }
        ],
        // city_ratio: [
        //   { required: true, type: 'number', message: '市九区供热面积占比必填', trigger: 'blur' },
        //   { min: 0, max: 100, type: 'number', message: '市九区供热面积占比范围0-100', trigger: 'blur' }
        // ],
        // suburb_ratio: [
        //   { required: true, type: 'number', message: '郊外供热面积占比必填', trigger: 'blur' },
        //   { min: 0, max: 100, type: 'number', message: '郊外供热面积占比范围0-100', trigger: 'blur' }
        // ],
        focus_ratio: [
          { required: true, type: 'number', message: '集中热面积占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '集中热面积占比范围0-100', trigger: 'blur' }
        ],
        non_focus_ratio: [
          { required: true, type: 'number', message: '非集中热面积占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '非集中热面积占比范围0-100', trigger: 'blur' }
        ],
        clean_energy_ratio: [
          { required: true, type: 'number', message: '清洁能源占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '清洁能源占比 q    范围0-100', trigger: 'blur' }
        ],
        coal_ratio: [
          { required: true, type: 'number', message: '燃煤占比必填', trigger: 'blur' },
          { min: 0, max: 100, type: 'number', message: '燃煤占比0-100', trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报日期必选', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    /**
             * 日期格式化
             */
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    handleSubmit () {
      this.formCustom.id = this.$route.query.id
      let requestData = this.formCustom
      if (this.$route.query.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        console.log(this.$route.query.id)
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.editShow()
      }
    },
    editShow () {
      getById({ id: this.$route.query.id }).then(({ data }) => {
        let { data: res } = data
        this.formCustom = res
        this.formCustom.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }

}
</script>

<style scoped>

</style>
